<template>
	<el-card>
		<el-form :inline="true" :model="orderForm" @keyup.enter="getDataList">
			<div>
				<el-form-item>
					<el-button type="success" @click="addOrderHandle">+ 添加新订单</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary">查询</el-button>
				</el-form-item>
			</div>
			<el-form-item label="订单号">
				<el-input v-model="orderForm.orderNo" clearable />
			</el-form-item>
			<el-form-item label="提单号">
				<el-input v-model="orderForm.orderNo" clearable />
			</el-form-item>
			<el-form-item label="出运方式">
				<el-select v-model="orderForm.businessState" clearable filterable>
					<el-option v-for="item in businessOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="订单来源">
				<el-select v-model="orderForm.orderOrigin" clearable placeholder="请选择">
					<el-option v-for="item in orderOriginOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="始发港">
				<el-select v-model="orderForm.originId" filterable clearable placeholder="请选择">
					<el-option v-for="item in OriginOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="目的港">
				<el-select v-model="orderForm.destId" filterable clearable placeholder="请选择">
					<el-option v-for="item in DestOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="时间范围">
				<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
			</el-form-item>
		</el-form>
		<el-table v-loading="dataListLoading" :data="orderDataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="dictType" label="序号" header-align="center" align="center" width="50">
				<template #default="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="下单时间" width="120" sortable header-align="center" align="center"> </el-table-column>
			<el-table-column prop="orderNo" label="订单号/提单号" header-align="center" align="center"> </el-table-column>

			<el-table-column prop="" label="客户" header-align="center" align="center"> </el-table-column>

			<el-table-column prop="origin" label="始发地" header-align="center" align="center"> </el-table-column>
			<el-table-column prop="dest" label="目的地" header-align="center" align="center"> </el-table-column>

			<el-table-column prop="deliveryDate" label="交货日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="hourseDate" label="入仓日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="airlineDate" label="航班日期" header-align="center" align="center" width="170">
				<template #default="{ row }">
					<el-date-picker
						v-model="row.airlineDate"
						format="YYYY/MM/DD hh:mm:ss"
						value-format="YYYY/MM/DD hh:mm:ss"
						style="width: 100%"
						type="datetime"
						placeholder="请选择航班日期"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="expressNum" label="件数" header-align="center" align="center"></el-table-column>

			<el-table-column prop="weight" label="毛重" header-align="center" align="center"></el-table-column>
			<el-table-column prop="chargeWeighy" label="计费重量" header-align="center" align="center"></el-table-column>
			<el-table-column prop="volume" label="体积(kg)" header-align="center" align="center"></el-table-column>
			<el-table-column prop="volume" label="操作账户" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
				<template #default="{ row }">
					<el-button type="primary" link @click="showDictDataHandle(row)">详细</el-button>
					<el-button type="primary" link @click="addOrUpdateHandle(row.id)">manifest</el-button>
					<el-button type="primary" link @click="deleteBatchHandle(row.id)">整票追踪</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="pageSize"
			:total="total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<add-order ref="addOrderRefs" />
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { getDataDictionary, useDictTypeAllApi } from '@/api/dict'
import { fetchWarning, myError } from '@/store/modules/common'
import { orderSelect, orderAdd } from '@/api/order'
import addOrder from './addOrder.vue'
import store from '@/store'
const orderForm = reactive({
	businessState: '',
	boxNo: '',
	orderNo: '',
	originId: '',
	destId: '',
	orderOrigin: '',
	orderDateStart: '',
	orderDateEnd: ''
})
const businessOptions = ref<[]>([])
const OriginOptions = ref<[]>([])
const DestOptions = ref<[]>([])
const orderOriginOptions = [
	{
		value: '1',
		label: '档口出仓'
	},
	{
		value: '2',
		label: '直接新增'
	}
]
const getDictionary = async (params: { dictType: string }) => {
	try {
		const res = await getDataDictionary(params)

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		console.log('字典数据', data)
		data.forEach((item: { dictType: any; dictLabel: any; dictTypeId: string }) => {
			switch (item.dictType) {
				case 'businessOptions':
					if (item.dictLabel === '海运' || item.dictLabel === '空运') {
						businessOptions.value.push({ label: item.dictLabel, value: item.id })
					}
					break
				case 'startAddressOptionsFirst':
					OriginOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'destinationOptionsFirst':
					DestOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				default:
					console.warn('未知字典类型:', item.dictType)
			}
		})
	} catch (error) {
		console.error('获取字典失败', error)
	}
}
const initDic = () => {
	getDictionary({
		dictType: 'businessOptions'
	})
	getDictionary({
		dictType: 'startAddressOptionsFirst'
	})
	getDictionary({
		dictType: 'destinationOptionsFirst'
	})
}
initDic()
const dataListLoading = ref(false)
const orderDataList = ref<[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = [1, 10, 20, 50, 100, 200]
const total = ref(0)
const dataListSelections = []
const getDataList = async () => {
	const obj = {
		page: currentPage.value,
		pageSize: pageSize.value
	}
	dataListLoading.value = true
	const params = { ...obj, ...orderForm }
	try {
		const res = await orderSelect(params)
		dataListLoading.value = false
		if (fetchWarning(res)) {
			return
		}
		const data = res.data || []
		console.log('getDataList', data)

		orderDataList.value = data.records.map(item => ({
			...item,
			airlineDate: ''
		}))
		total.value = data.total
	} catch (error) {
		dataListLoading.value = false
		myError(error)
	}
}
getDataList()

const handleBusinessChange = e => {
	console.log('handleBusinessChange', e)
}
const handleOriginChange = e => {
	console.log('handleOriginChange', e)
}
const handleDestChange = e => {
	console.log('handleDestChange', e)
}
const handleOrderOriginChange = e => {
	console.log('handleOrderOriginChange', e)
}
const handleSearch = () => {}
//分页
const sizeChangeHandle = (val: number) => {
	pageSize.value = val
	getDataList()
}
const currentChangeHandle = (val: number) => {
	currentPage.value = val
	getDataList()
}
//新增订单
const addOrderRefs = ref()
const addOrderHandle = () => {
	addOrderRefs.value.init()
}

// 日期选择
const value1 = ref('')
</script>
